<template>
     <div class="tabber">
         <div v-for="(item,index) in tablist" :key="index" @click="headleClick(index)" class="tab" :class="{active:currentIndex == index}">
             {{item}}
         </div>
         <div class="kong"></div>
     </div>
</template>

<script>

//在组件内部使用this ,这个this代表当前组件实例
export default {
     data(){
         return {
             currentIndex:0,
             tablist:[
                 "首页",
                 "配送",
                 "我的"
             ]
         }
     },
     methods:{
        headleClick(index){
            this.currentIndex = index
        }
     }
}
</script>

<style>
       *{
           margin: 0;
           padding: 0;
       }
     .tabber{
         width: 100%;
         height: 30px;
           position: fixed;
           bottom:0;
           display: flex;
           justify-content: space-around;
          /* margin: 0 20px;            */
          margin: 10px 0;
          border-top:1px solid #999;
     }
     .tabber .tab{
         padding: 10px;
     }

     .active{
         color:blue
     }
    
</style>